<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>JAVAscript练习</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" href="http://pengjianquan.pro.bluej.cn/resume/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="../../index.css"/>
		<style>
			.div1 {
				width: 41%;
				height: 300px;
				background: yellow;
			}
			
			#div2 div {
				width: 82%;
				height: 50px;
				margin: 20px 5%;
			}
			
			#div2 span {
				float: left;
				width: 50px;
				height: 50px;
				margin: 5px;
				border: 1px solid red;
			}
			
			#div2 span.active {
				width: 50px;
				background: yellow;
				border: 1px solid green;
			}
		</style>
		<script>
			window.onload = function() {
				var b1 = document.getElementById('button1');
				var b2 = document.getElementById('button2');
				var b3 = document.getElementById('button3');

				b1.onclick = function() {
					var d1 = document.getElementById('div1');
					d1.className = 'div1 box box-re';
				}

				b2.onclick = function() {
					var d2 = document.getElementById('div2')
					var s1 = d2.getElementsByTagName('span');
					s1[0].className = 'active';
					s1[1].className = 'active';
				}

				b3.onclick = function() {
					var dA = document.getElementsByTagName('div');
					alert(dA.length);
				}
			}
		</script>
	</head>

	<BODY>
		<pre><h1>JAVAscript练习</a></h1></pre>
		<div id="div1" class="box box-re">
			1、提取onclick进JS window.onload
			<P>
				<button id="button1" type="button">修改样式</button>
			</P>
		</div>
		<div id="div2" class="box box-re">
			2、批量获取元素修改样式 getElementsByTagName 数组里逐个挑选
			<p><button id="button2" type="button">修改前2个样式</button><br> 获取当前背景div2中的span，对前两个span增加class。
			</p>
			<div><span></span><span></span><span></span><span></span></div>
		</div>
		<div id="div3" class="box box-re">
			3、获取当前页面中所有div的个数（length）
			<p><button id="button3" type="button">统计当前页面有多少个div</button><br></p>
		</div>
		<div id="Record" class="box box-re red">
			记录<br>
			<p>提取onclick进JS，必须调用函数。</p>
			<p>JS里函数可以没有名字，需要把函数内容直接放到事件。例如：div1.onclick=function(){}</p>
			<p>window.onload的作用是当页面加载完成后才执行这个函数的内容。</p>
			<p>JS CSS HTM三者分离：不加行间JS事件，不加行间样式。提取行间事件就是为了三者分离。</p>
			<p>getElementsByTagName，可以获取一组标签元素，所谓的TagName就是标签名，他的参数就是需要获取什么类型的元素，例如div。他所获取到的就不是一个元素了，而是一组。可以通过length属性统计个数。getElementById，每次只能获取一个ID元素。</p>

		</div>

	</BODY>

</HTML>